<html>
<h2>Thêm Sản phẩm</h2>
<p id="page-intro">Thêm sản phẩm mới</p>
<div class="clear"></div>
<div class="content-box">
    <div class="content-box-header">
        <h3>Thông tin Sản phẩm</h3>
    </div>
    <div class="content-box-content">
        <form action="index.html#list_product" id="productForm" method="post" onsubmit="return validForm(this,'');">

            <p>
                <label>Tên Sản phẩm</label>
                <input class="text-input small-input" type="text" id="txtProductName" name="txtProductName" maxlength="25" />
            </p>
            <p>
                <label>Mã Sản phẩm</label>
                <input class="text-input small-input" type="text" id="txtProductCode" name="txtProductCode" maxlength="25" />
            </p>
            <p>
                <label>Danh mục Sản Phẩm</label>
                <select name="category" class="small-input">
                    <optgroup label="Trang Sức Nam">Trang Sức Nam</optgroup>
                    <option value="4">&#8212; Khuyên Tai Nam</option>
                    <option value="5">&#8212; Lắc Nam</option>
                    <option value="6">&#8212; Nhẫn Nam</option>
                    <option value="7">&#8212; Mặt Dây Nam</option>
                    <optgroup label="Trang Sức Nữ">Trang Sức Nữ</optgroup>
                    <option value="8">&#8212; Khuyên Tai Nữ</option>
                    <option value="9">&#8212; Lắc Nữ</option>
                    <option value="10">&#8212; Nhẫn Nữ</option>
                    <option value="11">&#8212; Mặt Dây Nữ</option>
                </select>
            </p>
            <p>
                <label>Chi tiết sản phẩm</label>
                <textarea class="text-input textarea wysiwyg" id="wysiwyg" name="txtProductDesc" rows="15" cols="90"></textarea>
            </p>
            <p>
                <label>Giá Sản phẩm</label>
                <input class="text-input small-input" type="text" id="txtProductPrice" name="txtProductPrice" /> VND
            </p>
            <p>
                <label>Ảnh Sản phẩm 1</label>
                <input class="text-input medium-input" size="60" type="file" id="txtProductImage1" name="txtProductImage1" accept="image/*" />
            </p>
            <p>
                <label>Ảnh Sản phẩm 2</label>
                <input class="text-input medium-input" size="60" type="file" id="txtProductImage2" name="txtProductImage2" accept="image/*" />
            </p>
            <p>
                <label>Ảnh Sản phẩm 3</label>
                <input class="text-input medium-input" size="60" type="file" id="txtProductImage3" name="txtProductImage3" accept="image/*" />
            </p>
            <p>
                <label>Thứ tự hiển thị</label>
                <input class="text-input tiny-input" type="text" id="txtDisplayOrder" name="txtDisplayOrder" value="0" />
            </p>
            <p>
                <label>Sản phẩm HOT?</label>
                <input type="radio" name="radHot" value="1" checked="checked" />Có
                <input type="radio" name="radHot" value="0" />Không
            </p>
            <p>
                <label>Kích hoạt?</label>
                <input type="radio" name="radActive" value="1" checked="checked" />Có
                <input type="radio" name="radActive" value="0" />Không
            </p>
            <br />
            <p>
                <input class="btn" type="submit" value="Thêm Sản phẩm" />&#32;
                <input class="btn" type="reset" value="Huỷ" />
            </p>

        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#wysiwyg').wysiwyg();
        //Tạo event blur cho các textfield và textarea
        $('#productForm *').each(function(){
            if(this.type=='text' || this.type=='textarea' || this.type=='file'){
                $(this).blur(function(){
                    validForm(this.form,this.name);
                });
            }
        });
        $('input[type="reset"]').click(function(){
            $('.content-box-content').find('span.input-notification').each(function(){
                $(this).remove();
            });
            $('.content-box-content *').each(function(){
                $(this).removeClass('error');
            })
        });
    });
</script>
</html>